<template>
  <div style="margin-top: 2px">
    <PullRefresh v-model="loading" @refresh="onRefresh">
      <Cell v-for="item in msgList" :title="item.name " center inset border clickable  @click="onClick(item)">
        <template #icon>
          <img class="avatar-icon" :src="prefix+item.iconUrl" />
        </template>
        <template #label>
          <span v-if="item.messageType===1">
            <Icon size="0.35rem" name="volume" />
            {{ item.duration }}s
          </span>
          <span v-else>{{item.message}}</span>
        </template>
        <template #right-icon>
           <Tag  
           :color="item.chatType===0?'#90ca86':'#9ddeef'"
           :text-color="item.chatType===0?'#349523':'#5497ab'">
                {{ item.chatType===0?'好友':'群聊' }}
           </Tag>
        </template>
      </Cell>
    </PullRefresh>
  </div>
</template>
<script setup>
import { computed, onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue';
import { getMsgList, connectSocket,disconnectSocket } from '@/v-api/msg';
import { Cell, Icon, PullRefresh,Tag } from 'vant';
import { getOssPrefix } from '@/v-api/properties';
import { useMsgStore } from '@/stores/msg';
import { Local } from '@/utils/storage';
import { getNumber } from '@/v-api/addressbook/group';
import { get } from 'vant/lib/utils';
import router from '@/router'

const msgStore = useMsgStore();
const prefix = getOssPrefix();
const msgList =computed(()=>msgStore.getInfo());
const loading = ref(false);
let socket = null;
const userId = Local.get('userInfo').userId;
const onRefresh = async () => {
  loading.value = true;
  msgList.value = await getMsgList();
  loading.value = false;
}
onMounted(async () => {
  //获取消息列表
  const msg = await getMsgList();
  for (const item of msg) {
    msgStore.addInfo(item);
  }
  const groupIds = msg
    .map(item => item.groupId) // 提取每个项的 groupId
    .filter(groupId => groupId !== null && groupId !== undefined);
  socket = connectSocket(userId,groupIds);
  socket.on('personMessage', (data) => {
    const msgData=JSON.parse(data);
    const removeData=msgStore.removeAndGetP(msgData.sendId);
    const newMsg={
      sendId:msgData.sendId,
      chatType:0,
      groupId:null,
      iconUrl:removeData.iconUrl,
      message:msgData.message,
      messageType:msgData.messageType,
      duration:msgData.duration,
      name:removeData.name
    }
    msgStore.leftAdd(newMsg)
  });
  socket.on('groupMessage', (data) => {
    const msgData=JSON.parse(data);
    const removeData=msgStore.removeAndGetG(msgData.groupId);
    const newMsg={
      sendId:msgData.sendId,
      chatType:1,
      groupId:msgData.groupId,
      iconUrl:removeData.iconUrl,
      message:msgData.message,
      messageType:msgData.messageType,
      duration:msgData.duration,
      name:removeData.name
    }
    msgStore.leftAdd(newMsg)
  });
});
onBeforeUnmount(() => {
  msgStore.removeInfo();
  disconnectSocket(socket)
});
const onClick = (item) => {
  let chatInfo = null;
  if (item.chatType === 0) {
    chatInfo={
      id:item.sendId,
      nickname:item.name,
      iconUrl:item.iconUrl
    }
    Local.set('chatInfo',chatInfo);
    setTimeout(() => {
      router.push('/chat-person');
    }, 500);
  } else {
    setTimeout(()=>{
      getNumber(item.groupId);
    },500)
    const groupNumber=Local.get('group-number');
    chatInfo={
      id:item.groupId,
      groupName:item.name,
      iconUrl:item.iconUrl,
      number:groupNumber
    }
    Local.set('chatInfo',chatInfo);
    setTimeout(() => {
      router.push('/chat-group');
    }, 500);
  }
  
}
</script>
<style >
.avatar-icon {
  width: 35px;
  height: 35px;
  border-radius: 20%;
  margin-right: 0.3rem;
}
.test{
  background-color: #90ca86;
  color: #349523
}
.TEST{
  background-color: #9ddeef;
  color: #5497ab
}
</style>